<!-- 合同-基础设置-合同类型及模板-编辑分组 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" showBack></pageHeaderNew>
    </template>
    <a-collapse :bordered="false" style="margin-top: 10px">
      <a-collapse-item header="使用指南" key="1">
        <template #header>
          <span style="font-size: 24px">使用指南</span>
        </template>
        <a-list :bordered="false" :split="false" size="small">
          <a-list-item v-for="(item, index) in listArr" :key="index"
            >{{ item }}
          </a-list-item>
        </a-list>
      </a-collapse-item>
    </a-collapse>
    <ConditionBox :margin-bottom="20">
      <template #right>
        <a-button type="primary" @click="addGroup(null)">新增分组</a-button>
        <a-button type="outline" @click="showSort">分组排序</a-button>
      </template>
    </ConditionBox>

    <table-turn :table-data="getTableData" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="分组名称">
      </a-table-column>
      <a-table-column :width="200" data-index="type" title="分组类型">
        <template #cell="{ record }">
          <span>
            {{
              record.type === 1
                ? '合同'
                : record.type === 2
                ? '协议'
                : '企业公文'
            }}
          </span>
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="remark" title="描述">
      </a-table-column>
      <a-table-column :width="200" data-index="count" title="分组内合同类型数">
      </a-table-column>
      <!-- <a-table-column :width="200" data-index="name" title="创建人">
      </a-table-column> -->
      <a-table-column :width="200" data-index="" title="操作" fixed="right">
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="addGroup(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除" v-if="record.count === 0">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <AddGroup
    v-model:visible="groupModalVisible"
    @group-emit="groupEmit"
    :data="currData"
  />
  <SortGroup
    v-model:visible="sortGroupVisible"
    @sortEmit="sortEmit"
    :data="data"
  />
</template>

<script lang="ts" setup>
import AddGroup from './Components/AddGroup/index.vue';
import SortGroup from './Components/SortGroup/index.vue';
import {
  GetContractGroup,
  ChangeContractGroup,
  AddContractGroup,
  DelContractGroup,
  ChangeContractGroupSort
} from '@/apis/management/contract/baseSetting';
const router = useRouter();
const title = '编辑分组';
let tableRef = ref();
const listArr = [
  `1、排序，可调整合同类型分组展示顺序`,
  `2、移动到新分组，可将当前分组内的所有合同类型转移到新分组中`
];

let data = ref();
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetContractGroup({
      ...pageData
    });
    res.content.forEach((item: any) => {
      delete item.children;
    });
    data.value = res.content;
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

let groupModalVisible = ref(false); // 分组弹窗

let currData = ref();
// 新增或编辑分组
const addGroup = (record: any | null) => {
  currData.value = record;
  groupModalVisible.value = true;
};

const groupEmit = async (data: any) => {
  try {
    if (data.id) {
      await ChangeContractGroup(data);
    } else {
      await AddContractGroup(data);
    }
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

let sortGroupVisible = ref(false); // 是否显示排序弹窗

// 显示排序弹窗
const showSort = () => {
  sortGroupVisible.value = true;
};

// 分组排序弹窗自定义事件
const sortEmit = async (groups: any) => {
  try {
    await ChangeContractGroupSort({
      groups
    });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 删除
const del = async (id: number) => {
  try {
    await DelContractGroup({
      id
    });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less">
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
